<app-cheat-sheet [cheatSheet]="cheatSheet">
    <div class="row">
        <div class="col-12 col-lg-8">
            <ul>
                <li>
                    <a href="https://wiki.factorio.com/Fluid_wagon" target="_blank" rel="noopener">Fluid wagons</a> require at least one pump and at most 3 pumps per fluid wagon.
                </li>
                <li>
                    If more than 3 pumps can be active on the fluid wagon, only 3 will “latch on” and be in use with the remaining pumps inactive.
                </li>
                <li>
                    <a href="https://wiki.factorio.com/Pump#Throughput" target="_blank" rel="noopener">Pumps</a> and Storage Tanks have a maximum throughput of {{sheetData?.pumpRate | number}} fluids/s.
                </li>
                <li>
                    To keep {{ sheetData?.offshorePumpRate | number }}
                    <a href="https://forums.factorio.com/viewtopic.php?f=18&t=19851" target="_blank" rel="noopener">fluid/second</a>
                    (offshore pump rate), place <a href="https://forums.factorio.com/viewtopic.php?f=5&t=46030">18 pipes between pumps</a>.
                </li>
                <li>Using underground pipes counts as less entities then if straight pipe for same distance.</li>
                <li>
                    Fluid wagons can hold {{sheetData?.storageTankSize | number}} units of fluids which is equal to {{sheetData?.fluidWagonSize / sheetData?.storageTankSize}}
                    <a href="https://wiki.factorio.com/Storage_tank" target="_blank" rel="noopener">Storage Tanks</a>.
                    <div class="row">
                        <div class="col-6 text-center">
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Fluid_wagon', 1)"></app-factorio-icon>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Storage_tank', sheetData?.fluidWagonSize / sheetData?.storageTankSize)"></app-factorio-icon>
                        </div>
                        <div class="col-6 text-center">
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Offshore_pump', 1)"></app-factorio-icon>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Pipe', 18)"></app-factorio-icon>
                        </div>
                    </div>
                </li>
                <li>
                    It is recommended that a fluid wagon's pump is connected directly to a tank.
                    Otherwise due to pipe pressure, the loading and unloading times may
                    <a href="https://www.reddit.com/r/factorio/comments/69kop6/pumppipe_throughput_tests_for_015/" target="_blank" rel="noopener">increase significantly</a>.
                </li>
            </ul>

        </div>

        <div class="col-12 col-lg-4 text-center">
            <table class="table table-sm table-hover fixed-width" style="max-width: 300px;">
                <caption class="text-center">Direct connection (no pipes)</caption>
                <thead class="text-center">
                    <tr>
                        <th>
                            <app-factorio-icon [icon]="dataService.getFactorioIcon('Pump')"></app-factorio-icon>
                        </th>
                        <th>
                            <a href="https://wiki.factorio.com/Fluid_wagon#Load_and_unload_times" target="_blank" rel="noopener">Measured</a>
                            Loading &amp; Unloading Times
                        </th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <tr *ngFor="let item of sheetData?.measuredTransferTimes">
                        <td>{{item?.pumps}}</td>
                        <td>{{item?.transferTime | number}}s</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <br>
    <hr>

    <div class="row align-items-center justify-content-around">
        <div class="col text-center col-print-3">
            <span><strong>Tanker-Pump Alignment <a href="#note-alignment">*</a></strong></span><br>
            <video autoplay loop muted src="{{APP_SETTINGS.links.getLocalImagePath('fluid-wagon-alignment.webm')}}" class="img-fluid rounded" alt="Tanker-Pump Alignment" title="Tanker-Pump Alignment"></video>
        </div>
        <br>
        <div class="col text-center col-print-3">
            <span><strong>Example Fast Transfer Build</strong></span><br>
            <img src="{{APP_SETTINGS.links.getLocalImagePath('fluid-wagon-fastest-transfer.webp')}}" class="img-fluid rounded" alt="Example Fast Transfer Build" title="Example Fast Transfer Build">
        </div>
        <br>
        <div class="col-12 text-center col-lg-5 col-print-4">
            <span><strong>Transfer Rate Comparison</strong></span><br>
            <video autoplay loop muted src="{{APP_SETTINGS.links.getLocalImagePath('fluid-transfer-rate-comparison.webm')}}" class="img-fluid rounded" alt="Transfer Rate Comparison" title="Transfer Rate Comparison"></video>
        </div>
    </div>
    <p id="note-alignment">*Trains snap into position when placed at train stations.</p>

    <hr>

    <div class="row justify-content-around">
        <div class="col-12 col-lg-8">
            <h4 class="card-title" id="fluid-flow-and-pipe-length">Fluid Flow and Pipe Length</h4>
            <ul>
                <li>Best pipe length is ~ 0-20 to keep healthy fluid flow</li>
                <li>Experimental data shows 1200 fluid/second through 16 pipes</li>
                <li>Throughput stays at &gt; 1000 fluid/second when pipe length is &lt; 200, after which the throughput drops off significantly.</li>
            </ul>
            <p class="text-muted">
                Thanks to <kbd>malventano</kbd> on Discord for providing the data and graphs.
            </p>
        </div>

        <div class="col-8 col-lg-4 text-center">
            <img src="{{APP_SETTINGS.links.getLocalImagePath('fluid-flow-vs-pipe-length.png')}}" class="img-fluid rounded limit-img-height" alt="Flow vs Pipe Length" title="Flow vs Pipe Length">
        </div>
    </div>

</app-cheat-sheet>
